<!doctype html>
<!--[if lt IE 7 ]> <html lang="ja" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="ja" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="ja" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="ja" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>debug03-01</title>
	<meta name="description" content="" />
	<meta name="author" content="Y.Nishimura@Office L / nishimuray@gmail.com" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link rel="shortcut icon" href="/favicon.ico" />
	<link rel="apple-touch-icon" href="/apple-touch-icon.<trng" />

	<link rel="stylesheet" href="css/style.css?v=1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/modernizr.js"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.6.1.js"><\/script>')</script>
	<script type="text/javascript" src="js/test.script.js"></script>
<style>
td{
	border:1px solid #ccc;
	background:#fff;
}
td.cur{
	background:#ccf;
}
td.sel{
	background:#fcc;
}
</style>
</head>
<body>

<table>
<tbody>
<tr><td>11</td><td>21</td><td>31</td><td>41</td><td>51</td><td>61</td><td>71</td><td>81</td><td>91</td></tr>
<tr><td>12</td><td>22</td><td>32</td><td>42</td><td>52</td><td>62</td><td>72</td><td>82</td><td>92</td></tr>
<tr><td>13</td><td>23</td><td>33</td><td>43</td><td>53</td><td>63</td><td>73</td><td>83</td><td>93</td></tr>
<tr><td>14</td><td>24</td><td>34</td><td>44</td><td>54</td><td>64</td><td>74</td><td>84</td><td>94</td></tr>
<tr><td>15</td><td>25</td><td>35</td><td>45</td><td>55</td><td>65</td><td>75</td><td>85</td><td>95</td></tr>
<tr><td>16</td><td>26</td><td>36</td><td>46</td><td>56</td><td>66</td><td>76</td><td>86</td><td>96</td></tr>
<tr><td>17</td><td>27</td><td>37</td><td>47</td><td>57</td><td>67</td><td>77</td><td>87</td><td>97</td></tr>
<tr><td>18</td><td>28</td><td>38</td><td>48</td><td>58</td><td>68</td><td>78</td><td>88</td><td>98</td></tr>
<tr><td>19</td><td>29</td><td>39</td><td>49</td><td>59</td><td>69</td><td>79</td><td>89</td><td>99</td></tr>
</tbody>
</table>

<p>クリックしたセルの上下左右を出力したい。ないものは空でOK</p>
<pre id="log"></pre>

<script type="text/javascript">
<!-- 
$(function() {

	// ちなみに、この書き方はわかりやすいし楽だけど、全てのセルにイベントが張り付くので
	// 処理効率は悪い。詳しくはjavascriptベストプラクティス等を参照。
	$("td").click((
		$("td.sel").removeClass("sel");
		$("td.cur").removeClass("cur");
		// 自分の値はすぐわかる
		var cv = $(this).addClass("cur").text();

		// 左右は前後
		var lv = $(this).prev("td").addClass("sel").text();
		var rv = $(this).next("td").addClass("sel").text();

		// では自分の上下を探すには？
		// まず自分がその行で何番目のtd要素かを知る
		var index = $(this).parent("tr").children("td").index(this);
		// そしたら上下のtrの子供のtdのindex番目が自分の上下のセル
		var tv = $(this).parent("tr").prev("tr").children("td").filter(function(i){return i == index;}).addClass("sel").text();
		var bv = $(this).parent("tr").next("tr").children("td").filter(function(i){return i == index;}).addClass("sel").text();

		str = "　　　TV=" + tv + "<br>"
		    + "LV=" + lv + ",CV=" + cv + ",RV=" + rv + "<br>"
		    + "　　　BV=" + bv;
		$("#log").empty().html(str);

	));

});
// -->
</script>

</body>
</html>
